<template>
    <div class="reports">
        <el-card class="box-card">
            <div id="cardBox"></div>
        </el-card>
    </div>
</template>

<script>
import {getCharts} from '@/api/index'

export default {
    name:'',
    data () {
        return {
            list:{},
            options:{
                title:{
                    text:"用户来源"
                },
                tooltip:{
                    trigger: "axis",
                    axisPointer:{
                        type:"cross",
                        label:{
                            backgroundColor: "#E9EEF3",
                        }
                    }
                },
                grid:{
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis:[
                    {
                        boundaryGap: false
                    }
                ],
                yAxis:[
                    {
                        type: "value"
                    }
                ]
            }
        }
    },
    mounted(){
        this.initList()
    },
    methods:{
        async initList () {
            let {data,meta} = await getCharts()
            if(meta.status !== 200) return this.$message.error({message:meta.msg}) 
            this.list = data
            let newOptions = {...this.options,...data}
            this.initCharts(newOptions)
        },
        initCharts(options){
            console.log(this.$echarts);
            //获取dom，进行初始化
            var myChart = this.$echarts.init(document.getElementById("cardBox"));
            // 绘制图表
            myChart.setOption(options);
        }
    }
}
</script>

<style lang="less" scoped>
#cardBox {
    width: 750px;
    height: 400px;
}
</style>